<template>
  <a-modal
    v-model="show"
    :title="title"
    width="600px"
    :maskClosable="false"
    :footer="null"
    @cancel="handleClose"
  >
    <div class="deal-detail">
      <a-spin tip="Loading..." :spinning="loading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="编号：" v-if="type !== 'add'">
            {{ form.userNo }}
          </a-form-model-item>

          <a-form-model-item label="用户名：" prop="userName">
            <a-input
              v-model.trim="form.userName"
              placeholder="请输入用户名"
              :disabled="type === 'show'"
              :maxLength="20"
            >
            </a-input>
          </a-form-model-item>

          <a-form-model-item label="类型：" prop="userType">
            <a-select
              v-model="form.userType"
              placeholder="请选择小区"
              :disabled="type === 'show'"
            >
              <a-select-option
                v-for="(node, index) in typeList"
                :key="index"
                :value="node.value"
                >{{ node.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="手机号：" prop="mobile">
            <a-input
              v-model.trim="form.mobile"
              placeholder="请输入手机号"
              :disabled="type !== 'add'"
              :maxLength="11"
            >
            </a-input>
          </a-form-model-item>
          <a-row v-if="type === 'add'">
            <a-col :offset="labelCol.span">
              <span class="pwd-tip"
                >系统将自动生成初始密码，初始密码为手机号后6位</span
              >
            </a-col>
          </a-row>
        </a-form-model>
        <div class="footer">
          <a-button type="default" @click="handleClose">取消</a-button>
          <a-button type="primary" @click="handleOk" :disabled="type === 'show'"
            >保存</a-button
          >
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { RE_PHONE } from "@/utils";
import httpApi from "@/api/account";
import { typeList } from "@/utils";

export default {
  data() {
    return {
      show: false,
      typeList,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      loading: false,
      form: {},
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "change" }
        ],
        userType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: RE_PHONE,
            message: "请输入正确的11位手机号",
            trigger: "change"
          }
        ]
      }
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    type: {
      type: String,
      default: "",
      required: true
    },
    data: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  computed: {
    title() {
      return this.type === "add"
        ? "新增"
        : this.type === "show"
        ? "查看"
        : "编辑";
    },
    operName() {
      return this.type === "add" ? "新增" : "编辑";
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(value) {
        this.show = value;
        this.form = Object.assign({}, this.data);
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.save();
        } else {
          return false;
        }
      });
    },
    save() {
      this.loading = true;
      httpApi
        .save(this.form)
        .then((res) => {
          if (res.retcode === 0) {
            this.$message.success(`${this.operName}成功！`);
            this.handleClose();
            this.$emit("cb");
          } else {
            this.$message.error(`${this.operName}失败！`);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("close", false);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 24px 0;
}
.deal-detail {
  min-height: 180px;
  .ant-form {
    padding: 0 44px;
    .pwd-tip {
      height: 34px;
      display: inline-block;
      .font-Medium(14px,rgba(0, 0, 0, 0.35),18px,400);
    }
  }
  .footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px 20px 0 20px;

    .flex(flex-end);
    .ant-btn {
      margin-left: 10px;
    }
  }
}
</style>
